<template>
  <div class="w-full h-14 relative flex justify-between bg-slate-50">
    <!--  图标和导航栏收缩按钮  -->
    <div class="h-full flex items-center">
      <div class="hover:bg-slate-200 h-4/5 aspect-square mx-3 flex justify-center items-center rounded-full">
        <img class="aspect-square h-1/2" src="../../public/nav.svg">
      </div>
    </div>
    <!--  搜索模块  -->
    <div class="h-full py-1">
      <!--   文字搜索   -->
      <div class="h-full flex rounded-3xl border border-solid border-slate-400">
        <!--    搜索框    -->
        <div class="h-full w-4/5 border-r border-solid border-slate-400">
          <input class="h-full w-4/5 outline-none ml-5 text-lg bg-slate-50">
        </div>
        <!--    搜索按钮    -->
        <div class="h-full w-16 flex justify-center items-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="aspect-square h-3/6" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>
        </div>
      </div>
    </div>
    <!--  用户相关  -->
    <div class="h-full w-1/6 flex-row-reverse flex items-center">
      <!--   个人信息   -->
      <div class="hover:bg-slate-200 h-4/5 aspect-square rounded-full mr-3 flex justify-center items-center" @click="isProfile = !isProfile">
        <svg xmlns="http://www.w3.org/2000/svg" class="aspect-square h-3/6" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M384 48c8.8 0 16 7.2 16 16V448c0 8.8-7.2 16-16 16H96c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H384zM96 0C60.7 0 32 28.7 32 64V448c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H96zM240 256a64 64 0 1 0 0-128 64 64 0 1 0 0 128zm-32 32c-44.2 0-80 35.8-80 80c0 8.8 7.2 16 16 16H336c8.8 0 16-7.2 16-16c0-44.2-35.8-80-80-80H208zM512 80c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V80zM496 192c-8.8 0-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm16 144c0-8.8-7.2-16-16-16s-16 7.2-16 16v64c0 8.8 7.2 16 16 16s16-7.2 16-16V336z"/></svg>
      </div>
      <!--  个人信息悬浮窗  -->
      <template v-if="isProfile">
        <teleport to="body">
          <profile-popover :user="user"></profile-popover>
        </teleport>
      </template>
      <!--   通知   -->
      <div class="hover:bg-slate-200 h-4/5 aspect-square rounded-full mr-3 flex justify-center items-center">
        <svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M224 0c-17.7 0-32 14.3-32 32V49.9C119.5 61.4 64 124.2 64 200v33.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416H424c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4V200c0-75.8-55.5-138.6-128-150.1V32c0-17.7-14.3-32-32-32zm0 96h8c57.4 0 104 46.6 104 104v33.4c0 47.9 13.9 94.6 39.7 134.6H72.3C98.1 328 112 281.3 112 233.4V200c0-57.4 46.6-104 104-104h8zm64 352H224 160c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"/></svg>
      </div>
      <!--   视频创建相关   -->
      <div @click="router.push({name:'upload'})" class="hover:bg-slate-200 h-4/5 aspect-square rounded-full mr-3 flex justify-center items-center">
        <svg xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM135.1 217.4c-4.5 4.2-7.1 10.1-7.1 16.3c0 12.3 10 22.3 22.3 22.3H208v96c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V256h57.7c12.3 0 22.3-10 22.3-22.3c0-6.2-2.6-12.1-7.1-16.3L269.8 117.5c-3.8-3.5-8.7-5.5-13.8-5.5s-10.1 2-13.8 5.5L135.1 217.4z"/></svg>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {defineProps, ref} from "vue";

const router = useRouter()
let isProfile = ref(false)
const props = defineProps(["user"])

</script>

<style scoped>

</style>
